<template>
  <div class="panorama-panel">
    <el-scrollbar>
      <div class="panel-title">
        <img :src="TitleIcon" />
        <span>城市现状</span>
      </div>
      <!-- 头部 -->
      <div class="flex-x main-around">
        <div
          class="header flex-x main-center cross-center flex-1"
        >
          <div
            class="header-icon flex-x main-center cross-center"
          >
            <img
              class="background"
              :src="XiaquBackground"
              alt="规划面积背景"
            />
            <img
              class="center"
              :src="Xiaqu"
              alt="规划面积"
            />
          </div>
          <div class="header-title__wrapper flex-y">
            <span class="header-title">规划面积</span>
            <p class="area">
              60.4<span class="unit">{{
                squareKilometerSymbol
              }}</span>
            </p>
          </div>
        </div>
        <div
          class="header flex-x main-center cross-center flex-1"
        >
          <div
            class="header-icon flex-x main-center cross-center"
          >
            <img
              class="background"
              :src="QibuquBackground"
              alt="城镇集中建设区用地面积背景"
            />
            <img
              class="center"
              :src="Qibuqu"
              alt="城镇集中建设区用地面积"
            />
          </div>
          <div class="header-title__wrapper flex-y">
            <span class="header-title"
              >城镇集中建设区用地面积</span
            >
            <p class="area">
              34.6<span class="unit">{{
                squareKilometerSymbol
              }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="tab">
        <div
          class="tab_item"
          :class="
            tabActive === item.type ? 'tab_item_active' : ''
          "
          @click="tabClick(item.type)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>

      <img
        class="line-separator"
        :src="LineSeparator"
        alt="分割线"
      />
      <!-- 各类用地占比 -->
      <div class="chart-wrapper flex-y">
        <div class="title flex-x cross-center">
          <img
            class="title-prefix"
            :src="TitlePrefix"
            alt="标题前缀"
          />
          <span>各类用地占比</span>
        </div>
        <div
          class="chart-wrapper-content flex-x cross-center"
          v-show="
            tabActive !== tabList[tabList.length - 1].type
          "
        >
          <chart
            chart-id="panorama-type-1-chart1"
            :chart-height="200"
            chart-width="100%"
            :options="chart1Options"
          />
          <div class="flex-y cross-start flex-1">
            <div
              class="legend flex-x cross-center"
              v-for="(item, index) in typeTotalList"
              :key="index"
            >
              <div
                class="legend-round-icon"
                :class="item.color"
              ></div>
              <span class="legend-title">{{
                item.type
              }}</span>
              <span class="legend-value">{{
                item.count + squareKilometerSymbol
              }}</span>
            </div>
          </div>
        </div>
        <div
          class="chart-wrapper-content flex-y cross-center"
          v-show="
            tabActive === tabList[tabList.length - 1].type
          "
        >
          <div class="flex-x cross-start">
            <div
              class="legend flex-x cross-center"
              v-for="(item, index) in typeTotalList"
              :key="index"
            >
              <div
                class="legend-round-icon"
                :class="item.color"
              ></div>
              <span class="legend-title">{{
                item.type
              }}</span>
            </div>
          </div>
          <chart
            chart-id="panorama-type-1-chart6"
            style="width: 100% !important"
            :chart-height="200"
            :options="chart6Options"
          />
        </div>
      </div>
      <img
        class="line-separator"
        :src="LineSeparator"
        alt="分割线"
      />
      <!-- 建设用地占比 -->
      <div class="chart-wrapper flex-y">
        <div class="title flex-x cross-center">
          <img
            class="title-prefix"
            :src="TitlePrefix"
            alt="标题前缀"
          />
          <span
            >农用地-基本农田:
            {{
              agriculturalArea + squareKilometerSymbol
            }}</span
          >
        </div>
        <div
          class="chart-wrapper-content flex-x cross-center"
          v-show="
            tabActive !== tabList[tabList.length - 1].type
          "
        >
          <chart
            chart-id="panorama-type-1-chart2"
            :chart-height="200"
            chart-width="50% !important"
            :options="chart2Options"
          />
          <div class="flex-y cross-start flex-1">
            <div
              class="legend flex-x cross-center"
              v-for="(item, index) in agriculturalTypeList"
              :key="index"
            >
              <div
                class="legend-round-icon"
                :class="item.color"
              ></div>
              <span class="legend-title">{{
                item.type
              }}</span>
              <span class="legend-value">{{
                item.count + squareKilometerSymbol
              }}</span>
            </div>
          </div>
        </div>
        <div
          class="chart-wrapper-content flex-y cross-center"
          v-show="
            tabActive === tabList[tabList.length - 1].type
          "
        >
          <div class="flex-x cross-start flex-1">
            <div
              class="legend flex-x cross-center"
              v-for="(item, index) in agriculturalTypeList"
              :key="index"
            >
              <div
                class="legend-round-icon"
                :class="item.color"
              ></div>
              <span class="legend-title">{{
                item.type
              }}</span>
            </div>
          </div>
          <chart
            chart-id="panorama-type-1-chart7"
            :chart-height="200"
            style="width: 100% !important"
            :options="chart7Options"
          />
        </div>
      </div>
      <img
        class="line-separator"
        :src="LineSeparator"
        alt="分割线"
      />
      <div class="chart-wrapper flex-y">
        <div class="title flex-x cross-center">
          <img
            class="title-prefix"
            :src="TitlePrefix"
            alt="标题前缀"
          />
          <span>建设用地</span>
        </div>
        <div
          class="chart-wrapper-content flex-x main-around cross-center"
          v-show="
            tabActive !== tabList[tabList.length - 1].type
          "
        >
          <div class="special-chart">
            <chart2
              :options="chart4Options"
              class="right-content-echart"
            />
          </div>
          <div class="special-chart">
            <chart3
              :options="chart5Options"
              class="right-content-echart"
            />
          </div>
        </div>
        <div
          class="chart-wrapper-content flex-x main-around cross-center"
          v-show="
            tabActive !== tabList[tabList.length - 1].type
          "
          style="margin-bottom: 20px; margin-top: 10px"
        >
          <div
            style="width: 150px; text-align: center"
            v-for="(
              item, index
            ) in constructionClassificationList"
            :key="index"
          >
            <div>{{ item.property }}</div>
            <div>
              {{ item.value + squareKilometerSymbol }}
            </div>
          </div>
        </div>
        <div
          class="chart-wrapper-content flex-y cross-center"
          v-show="
            tabActive === tabList[tabList.length - 1].type
          "
        >
          <div class="flex-x cross-start flex-1">
            <div
              class="legend flex-x cross-center"
              v-for="(
                item, index
              ) in constructionClassificationList"
              :key="index"
            >
              <div
                class="legend-round-icon"
                :class="item.color"
              ></div>
              <span class="legend-title">{{
                item.property
              }}</span>
            </div>
          </div>
          <chart
            chart-id="panorama-type-1-chart8"
            :chart-height="200"
            style="width: 100% !important"
            :options="chart8Options"
          />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import TitleIcon from '@/assets/img/logo.png'
import LineSeparator from '@/assets/img/line-separator.png'
import TitlePrefix from '@/assets/img/title-prefix.png'
import QibuquBackground from '@/assets/img/qibuqu-area-background.png'
import Qibuqu from '@/assets/img/qibuqu-area.png'
import XiaquBackground from '@/assets/img/xiaqu-area-background.png'
import Xiaqu from '@/assets/img/xiaqu-area.png'
import { squareKilometer } from '@/utils/constant'
import Chart from '@/components/chart/index'
import Chart2 from '@/views/cockpit/panorama/components/chart2'
import Chart3 from '@/views/cockpit/panorama/components/chart3'

export default {
  name: 'PanoramaPanel',
  components: {
    Chart,
    Chart2,
    Chart3
  },
  data() {
    return {
      TitleIcon,
      LineSeparator,
      TitlePrefix,
      QibuquBackground,
      Qibuqu,
      XiaquBackground,
      Xiaqu,
      squareKilometerSymbol: squareKilometer,
      tabActive: '1',
      tabList: [
        { name: '2021年', type: '1' },
        { name: '2020年', type: '2' },
        { name: '近两年', type: '3' }
      ],
      typeTotalList: [
        {
          type: '建设用地',
          count: 12.64,
          color: 'light-blue'
        },
        {
          type: '农用地',
          count: 46.78,
          color: 'blue'
        },
        {
          type: '其他用地',
          count: 0.98,
          color: 'green'
        }
      ],
      agriculturalArea: 2.74,
      agriculturalTypeList: [
        {
          type: '耕地',
          count: 27.64,
          color: 'yellow'
        },
        {
          type: '林地',
          count: 12.77,
          color: 'light-blue'
        },
        {
          type: '园地',
          count: 3.33,
          color: 'pink'
        },
        {
          type: '其他',
          count: 3.04,
          color: 'blue'
        }
      ],
      constructionClassificationList: [
        {
          property: '集体土地',
          color: 'pink',
          value: '6.39'
        },
        {
          property: '国有土地',
          color: 'yellow',
          value: '6.25'
        }
      ],
      chart4Options: {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['52%', '63%'],
            animation: false,
            // label: {
            //   show: false,
            //   color: '#fff'
            // },
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: [
                  `{a|${(
                    (6.39 / (6.39 + 6.25)) *
                    100
                  ).toFixed(2)}}{c| %}`
                ].join('\n'),
                rich: {
                  a: {
                    color: 'white',
                    lineHeight: 36,
                    fontSize: 18
                  },
                  b: {
                    color: 'white',
                    fontSize: 14
                  },
                  c: {
                    color: 'white',
                    fontSize: 12
                  }
                }
                // color: '#fff',
                // fontSize: 16
              }
            },
            // labelLine: {
            //   show: true
            // },
            data: [
              {
                value: 6.39,
                name: '集体土地',
                itemStyle: {
                  color: 'rgba(255, 102, 102, 1)',
                  borderCap: 'round'
                }
              },
              {
                value: 6.25,
                name: '国有土地',
                itemStyle: {
                  color: 'rgba(255,255,255,0.3)'
                }
              }
            ]
          }
        ]
      },
      chart5Options: {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['52%', '63%'],
            animation: false,
            // label: {
            //   show: false,
            //   color: '#fff'
            // },
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: [
                  `{a|${(
                    (6.25 / (6.39 + 6.25)) *
                    100
                  ).toFixed(2)}}{c| %}`
                ].join('\n'),
                rich: {
                  a: {
                    color: 'white',
                    lineHeight: 36,
                    fontSize: 18
                  },
                  b: {
                    color: 'white',
                    fontSize: 14
                  },
                  c: {
                    color: 'white',
                    fontSize: 12
                  }
                }
              }
            },
            data: [
              {
                value: 6.25,
                name: '国有土地',
                itemStyle: {
                  color: 'rgba(255, 234, 149, 1)',
                  borderCap: 'round'
                }
              },
              {
                value: 6.39,
                name: '集体土地',
                itemStyle: {
                  color: 'rgba(255,255,255,0.3)'
                }
              }
            ]
          }
        ]
      },
      chart1Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parmas) => {
            const seriesName = parmas.seriesName
            const value = parmas.data.value.toFixed(2)
            const name = parmas.data.name
            const marker = parmas.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              'km²'
            )
          },
          confine: true
        },
        color: ['#696dff', '#00ffff', '#00d075'],
        series: [
          {
            name: '各类用地占比',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              overflow: 'none',
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: false
            },
            labelLine: {
              length: 4,
              length2: 4
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 12.64, name: '建设用地' },
              { value: 46.78, name: '农用地' },
              { value: 0.98, name: '未利用地' }
            ]
          }
        ]
      },
      chart2Options: {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const seriesName = params.seriesName
            const value = params.data.value.toFixed(2)
            const name = params.data.name
            const marker = params.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              'km²'
            )
          },
          confine: true
        },
        color: ['#ffdda2', '#00ffff', '#FF6686', '#696dff'],
        series: [
          {
            name: '建设用地占比',
            type: 'pie',
            left: 0,
            radius: ['60%', '80%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              color: 'white',
              overflow: 'none',
              alignTo: 'none',
              formatter: '{d}%',
              textStyle: {
                fontSize: 10
              }
            },
            labelLayout: {
              hideOverlap: false
            },
            labelLine: {
              length: 4,
              length2: 1
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              // { value: 2.74, name: '基本农田' },
              { value: 27.64, name: '耕地' },
              { value: 12.77, name: '林地' },
              { value: 3.33, name: '园地' },
              { value: 3.04, name: '其他' }
            ]
          }
        ]
      },
      chart6Options: {
        color: [
          'rgba(100, 136, 237, 1)',
          'rgba(111, 255, 194, 1)',
          'rgba(255, 180, 25, 1)'
        ],
        tooltip: {
          trigger: 'item',
          confine: true
        },
        grid: {
          top: '20',
          bottom: '30',
          left: '30',
          right: '20'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2019', '2020']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '农用地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(100, 136, 237, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [51.407782, 50.36023772]
          },
          {
            name: '建设用地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(111, 255, 194, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [8.339581, 9.329643]
          },
          {
            name: '其他用地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(255, 180, 25, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [0.630901, 0.688383]
          }
        ]
      },
      chart7Options: {
        color: [
          '#ffa862',
          '#ffdda2',
          '#00ffff',
          '#FF6686',
          '#696dff'
        ],
        tooltip: {
          trigger: 'item',
          confine: true
        },
        grid: {
          top: '20',
          bottom: '30',
          left: '30',
          right: '20'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2019', '2020']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '基本农田',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(255, 168, 98, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [2.742886, 2.742886]
          },
          {
            name: '耕地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(255, 234, 149, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [30.550146, 29.6343953]
          },
          {
            name: '林地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(32, 246, 198, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [14.331403, 14.071632]
          },
          {
            name: '园地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(255, 102, 134, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [3.356139, 3.500248418]
          },
          {
            name: '其他',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(0, 204, 255, 0.35)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [3.170094, 3.153962]
          }
        ]
      },
      chart8Options: {
        color: ['#FC6565', '#ffdda2'],
        tooltip: {
          trigger: 'item',
          confine: true
        },
        grid: {
          top: '20',
          bottom: '30',
          left: '30',
          right: '20'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2019', '2020']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '集体土地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(252, 101, 101, 0.45)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [6.971922, 7.243977]
          },
          {
            name: '国有土地',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(255, 234, 149, 0.45)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [1.367659, 2.085666]
          }
        ]
      }
    }
  },
  methods: {
    tabClick(type) {
      if (this.tabActive === type) {
        return
      }
      this.tabActive = type
      console.log(type)

      switch (type) {
        case '2':
          let typeTotalList = [
            {
              type: '建设用地',
              count: 9.31,
              color: 'light-blue'
            },
            {
              type: '农用地',
              count: 50.39,
              color: 'blue'
            },
            {
              type: '未利用地',
              count: 0.7,
              color: 'green'
            }
          ]
          let agriculturalTypeList = [
            {
              type: '耕地',
              count: 29.75,
              color: 'yellow'
            },
            {
              type: '林地',
              count: 14.06,
              color: 'light-blue'
            },
            {
              type: '园地',
              count: 3.39,
              color: 'pink'
            },
            {
              type: '其他',
              count: 3.19,
              color: 'blue'
            }
          ]
          let constructionClassificationList = [
            {
              property: '集体土地',
              color: 'pink',
              value: 7.29
            },
            {
              property: '国有土地',
              color: 'yellow',
              value: 2.01
            }
          ]
          this.typeTotalList = typeTotalList
          this.agriculturalTypeList = agriculturalTypeList
          this.constructionClassificationList =
            constructionClassificationList

          let data1 = [
            { value: 9.31, name: '建设用地' },
            { value: 50.39, name: '农用地' },
            { value: 0.7, name: '未利用地' }
          ]
          let data2 = [
            // { value: 2.742886, name: '基本农田' },
            { value: 29.75, name: '耕地' },
            { value: 14.06, name: '林地' },
            { value: 3.39, name: '园地' },
            { value: 3.19, name: '其他' }
          ]
          this.chart1Options.series[0].data = data1
          this.chart2Options.series[0].data = data2
          this.agriculturalArea = 2.742886
          this.chart4Options.series[0].label.normal.formatter =
            [
              `{a|${((7.29 / (7.29 + 2.01)) * 100).toFixed(
                2
              )}}{c| %}`
            ].join('\n')
          this.chart5Options.series[0].label.normal.formatter =
            [
              `{a|${((2.01 / (7.29 + 2.01)) * 100).toFixed(
                2
              )}}{c| %}`
            ].join('\n')
          break
        case '1':
          typeTotalList = [
            {
              type: '建设用地',
              count: 12.64,
              color: 'light-blue'
            },
            {
              type: '农用地',
              count: 46.78,
              color: 'blue'
            },
            {
              type: '其他用地',
              count: 0.98,
              color: 'green'
            }
          ]
          agriculturalTypeList = [
            // {
            //   'type': '基本农田',
            //   'count': 2.74,
            //   'color': 'orange'
            // },
            {
              type: '耕地',
              count: 27.64,
              color: 'yellow'
            },
            {
              type: '林地',
              count: 12.77,
              color: 'light-blue'
            },
            {
              type: '园地',
              count: 3.33,
              color: 'pink'
            },
            {
              type: '其他',
              count: 3.04,
              color: 'blue'
            }
          ]
          constructionClassificationList = [
            {
              property: '集体土地',
              color: 'pink',
              value: '6.39'
            },
            {
              property: '国有土地',
              color: 'yellow',
              value: '6.25'
            }
          ]
          this.typeTotalList = typeTotalList
          this.agriculturalTypeList = agriculturalTypeList
          this.constructionClassificationList =
            constructionClassificationList

          data1 = [
            { value: 12.64, name: '建设用地' },
            { value: 46.78, name: '农用地' },
            { value: 0.98, name: '未利用地' }
          ]
          data2 = [
            // { value: 2.74, name: '基本农田' },
            { value: 27.64, name: '耕地' },
            { value: 12.77, name: '林地' },
            { value: 3.33, name: '园地' },
            { value: 3.04, name: '其他' }
          ]
          this.chart1Options.series[0].data = data1
          this.chart2Options.series[0].data = data2
          this.agriculturalArea = 2.74
          this.chart4Options.series[0].label.normal.formatter =
            [
              `{a|${((6.39 / (6.39 + 6.25)) * 100).toFixed(
                2
              )}}{c| %}`
            ].join('\n')
          this.chart5Options.series[0].label.normal.formatter =
            [
              `{a|${((6.25 / (6.39 + 6.25)) * 100).toFixed(
                2
              )}}{c| %}`
            ].join('\n')
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.panorama-panel {
  background-color: rgba(7, 13, 35, 0.5);

  ::v-deep {
    .el-scrollbar {
      height: 100%;

      &__wrap {
        overflow-x: hidden;
      }

      &__view {
        padding-right: 8px;
      }
    }
  }

  .panel-title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;

    img {
      width: 34px;
      height: 34px;
    }

    span {
      margin-left: 20px;
      font-size: 24px;
      color: white;
      font-weight: 800;
    }
  }

  .header {
    padding: 0 11px 10px 0;
    overflow: hidden;

    &-icon {
      position: relative;
      width: 60px;
      min-width: 60px;
      height: 60px;
      min-height: 60px;
      margin-right: 3px;

      img.background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      img.center {
        width: 34px;
        height: 34px;
        z-index: 1;
      }
    }

    &-title__wrapper {
      overflow: hidden;
    }

    &-title {
      font-size: 14px;
      font-weight: 400;
      color: white;
      //overflow: hidden;
      //white-space: nowrap;
      //text-overflow: ellipsis;
    }

    .area {
      font-size: 20px;
      font-weight: bold;
      color: white;
    }

    .unit {
      font-size: 14px;
      font-weight: 400;
      color: white;
    }
  }

  .line-separator {
    width: 100%;
    object-fit: cover;
    padding-right: 8px;
    margin-top: 20px;
  }

  .chart-wrapper {
    padding: 29px 10px 0 10px;

    &:last-of-type {
      padding-bottom: 0;
    }

    &-content {
      margin-top: 20px;

      .chart {
        width: 50% !important;
        margin-right: 20px;
      }
    }

    .legend {
      &:not(:last-of-type) {
        margin-bottom: 13px;
      }

      &-round-icon {
        width: 7px;
        height: 7px;
        margin-right: 3px;
        border-radius: 50%;

        &.blue {
          background-color: #696dff;
        }

        &.pink {
          background-color: #ff6686;
        }

        &.light-blue {
          background-color: #00ffff;
        }

        &.green {
          background-color: #00d075;
        }

        &.orange {
          background-color: #ffa862;
        }

        &.yellow {
          background-color: #ffdda2;
        }
      }

      &-title {
        font-size: 14px;
        font-weight: 400;
        color: white;
        margin-right: 6px;
      }

      &-value {
        font-size: 14px;
        font-weight: bold;
        color: white;
      }
    }

    .chart-title {
      font-size: 12px;
      font-weight: 400;
      color: #d2e6f0;
      align-self: flex-end;
      margin-top: 20px;
    }
  }

  .title {
    &-prefix {
      position: relative;
      top: 2px;
      width: 6px;
      height: 16px;
      margin-right: 5px;
      object-fit: fill;
    }

    span {
      font-size: 18px;
      font-weight: 800;
      line-height: 18px;
      background: linear-gradient(
        180deg,
        white 0%,
        #a4bbdd 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .tab {
    display: flex;
    flex-direction: row;
    justify-content: center;

    &_item {
      margin-top: 23px;
      font-size: 16px;
      font-family: PingFang SC;
      //font-weight: bold;
      color: white;
      //width: 94px;
      height: 28px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      position: relative;

      &:not(:last-of-type) {
        margin-right: 30px;
      }
    }

    //.tab_item:nth-child(3)::before {
    //  content: '/';
    //  display: inline-block;
    //  opacity: 50%;
    //  float: left;
    //  color: #ffffff;
    //}

    //.tab_item:nth-child(2)::before {
    //  content: '/';
    //  display: inline-block;
    //  opacity: 50%;
    //  float: left;
    //  color: #fff;
    //}

    &_item:hover {
      color: rgba(26, 217, 255, 1);
    }
  }

  .tab_item_active {
    font-family: PingFang SC;
    color: rgba(26, 217, 255, 1);
    position: relative;
  }

  .tab_item_active::after {
    content: '';
    position: absolute;
    left: 25%;
    bottom: 0;
    width: 50%;
    height: 3px;
    background: rgba(26, 217, 255, 1);
  }

  .special-chart {
    position: relative;
  }
}
</style>
